<template>
  <div class="header">
    <a-form layout="inline" class="form">
      <a-form-item label="状态">
        <a-select v-model:value="search.answerStatus" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in answerStatusList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="执行方式">
        <a-select v-model:value="search.surveyType" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in surveyTypeList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属客户">
        <a-select v-model:value="search.customer" style="width: 120px;" allowClear>
          <a-select-option :value="option.id" v-for="option in customerOption" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="时间">
        <a-range-picker v-model:value="search.date" />
      </a-form-item>
      <a-form-item label="TransactionID">
        <a-input v-model:value="search.tranId" placeholder="输入TransactionID" />
      </a-form-item>
      <a-form-item label="参与项目ID">
        <a-input v-model:value="search.surveyId" placeholder="输入项目ID" />
      </a-form-item>
      <a-form-item label="项目名称">
        <a-input v-model:value="search.surveyTitle" placeholder="输入项目名称" />
      </a-form-item>
      <a-form-item label="会员ID">
        <a-input v-model:value="search.memberId" placeholder="输入会员ID" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model:value="search.mobile" placeholder="输入手机号" />
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="search.realname" placeholder="输入姓名" />
      </a-form-item>
      <a-form-item label="推荐人手机号">
        <a-input v-model:value="search.sharerMobile" placeholder="输入推荐人手机号" />
      </a-form-item>
      <a-form-item label="推荐人ID">
        <a-input v-model:value="search.sharerId" placeholder="输入推荐人ID" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getTableData">查询</a-button>
        <a-button @click="onReset" class="btn">重置</a-button>
        <a-button type="success" class="btn" @click="onExport">导出</a-button>
      </a-form-item>
    </a-form>
  </div>
  <TablePage 
    :dataSource="dataSource"
    :columns="columns" 
    :paginationData="paginationData"
    @change="pageChange"
    @showSizeChange="showSizeChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'createTime'">
        {{proxy.$filters.formatTime(record.createTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'actions' && record.status === 0">
        <a-button type="link" @click="onStatus(record)" :disabled="!record.uid">审核</a-button>
      </template>
    </template>
  </TablePage>
  <BasicModal @register="register">
    <div style="font-size: 16px;font-weight: bold;">请选择审核状态，如审核成功则自动发放奖励</div>
    <template #footer>
      <a-button type="primary" @click="onSubmitStatus(1)">审核通过</a-button>
      <a-button danger type="primary" @click="onSubmitStatus(-1)">拒绝</a-button>
    </template>
  </BasicModal>
</template>

<script setup>
import { useRoute } from 'vue-router'
import TablePage from "@/components/TablePage/index.vue"
import { usePagination } from "@/useHooks/usePagination"
import { completeList, completeReview } from '@/api/user';
import {customerList} from '@/api/survey';
import { downloadFile } from '@/utils/index'
import { reactive, ref, watch, onMounted, computed, createVNode } from 'vue'
import { message } from 'ant-design-vue';
import { getCurrentInstance } from 'vue'
import BasicModal from '@/components/Modal/BasicModal.vue';
import { useModal } from "@/components/Modal/useModal";
const route = useRoute()
const [register, { actionDialog: openStatus }] = useModal({
  title: "审核"
});
const { proxy } = getCurrentInstance()
const statusList = ref([
  {label: '全部',value: null},
  { label: '待审核', value: 0 },
  { label: '完成', value: 1 },
  { label: '中途退出', value: 0 },
  { label: '审核失败', value: -1 },
  { label: '答题失败', value: -2 },
  { label: '数据作废', value: -2 }
])
const answerStatusList = ref([
  { label: '全部', value: null },
  { label: '完成', value: 1 },
  { label: '配额满', value: 2 },
  {label: '失败', value: -1}
])
const surveyTypeList = ref([
  { label: '全部', value: null },
  { label: '定量', value: 2 },
  {label: '定性', value: 1}
])
const customerOption = ref([]);
onMounted(() => {
  customerList({}).then(res => {
    customerOption.value = [{name: '全部', id: null},...res.data.list]
  })
  if (route.query.surveyId) search.surveyId = route.query.surveyId
  if (route.query.memberId)search.memberId = route.query.memberId
  getTableData()
})
const dataSource= ref([])
const columns = computed(() => {
  const arr = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 120
    },
    {
      title: '项目ID',
      dataIndex: 'tid',
      width: 120
    },
    {
      title: '项目名称',
      dataIndex: 'title',
      width: 180
    },
    {
      title: '会员ID',
      dataIndex: 'uid',
      width: 140
    },
    {
      title: '会员',
      dataIndex: 'realname',
      width: 120
    },
    {
      title: '推荐人',
      dataIndex: 'sharerName',
      width: 120
    },
    {
      title: '所属客户',
      dataIndex: 'customerName',
      width: 120
    },
    {
      title: '执行方式',
      dataIndex: 'surveyType',
      width: 120
    },
    {
      title: '答题状态',
      dataIndex: 'answerStatusDesc',
      width: 100
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      width: 140
    },
    {
      title: '答题IP',
      dataIndex: 'ip',
      width: 120
    },
    {
      title: '审核状态',
      dataIndex: 'statusDes',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 120,
      fixed: 'right'
    }
  ]
  return arr;
})
const search = reactive({
  status: null,
  answerStatus: null,
  customer: null,
  memberId: null,
  mobile: undefined,
  realname: undefined,
  sharerId: undefined,
  sharerMobile: undefined,
  surveyId: undefined,
  surveyTitle: undefined,
  tranId: undefined,
  date: [],
  source: null,
  titleId: null,
  surveyType: null,
})
const onReset = () => {
  search.status = null
  search.answerStatus = null
  search.customer = null
  search.memberId = null
  search.mobile = undefined
  search.realname = undefined
  search.sharerId = undefined
  search.sharerMobile = undefined
  search.surveyId = undefined
  search.surveyTitle = undefined
  search.tranId = undefined
  search.surveyType = null
  search.date = []
  getTableData()
}
const { paginationData, pageChange, showSizeChange } = usePagination()
watch(paginationData, () => {
  getTableData()
})
const getTableData = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.date) && req.date.length >= 2 && req.date[0] && req.date[1]) {
    req.startDate = req.date[0].format('YYYY-MM-DD')
    req.endDate = req.date[1].format('YYYY-MM-DD')
  }
  delete req.date
  completeList(req).then((res) => {
    paginationData.total = res.data.total
    dataSource.value = res.data.list.map(item => ({
      ...item,
      statusDes: statusList.value.find(i => i.value === item.status).label,
      answerStatusDesc: item.answerStatus ? answerStatusList.value.find(i => i.value === item.answerStatus).label : ''
    }))
  })
}
const onExport = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.date) && req.date.length >= 2 && req.date[0] && req.date[1]) {
    req.startDate = req.date[0].format('YYYY-MM-DD')
    req.endDate = req.date[1].format('YYYY-MM-DD')
  }
  delete req.date
  downloadFile('/member/complete/list/export',req)
}
let currentRecord = {}
const onStatus = (record) => {
  currentRecord = record
  openStatus()
}
const onSubmitStatus = (status) => {
  completeReview(currentRecord.id, status).then(() => {
    message.success('审核成功')
    openStatus(false)
    getTableData()
  })
}
</script>
